<template>
  <div class="page">
    <!--直播-->
    <el-card v-if="!isEnd" class="card" style="background-color: rgb(251,251,251);">
      <div class="video">
        <live-streaming :live-id="id"></live-streaming>
      </div>
    </el-card>

    <!--直播间详情-->
    <el-card class="card">
      <div class="card-title">直播间详情</div>
      <el-divider></el-divider>
      <table class="card-content">
        <tr class="tr" v-for="(item,index) in details">
          <td class="td" v-for="i in item" style="width:33.33%">
            <div class="content-item">
              <div class="item-label"><div class="label-text">{{ i.label }}</div></div>
              <div class="item-data">
                <div v-if="i.type==='string'">{{i.data}}</div>
                <div v-else-if="i.type==='img'">
                  <img src="./logo1.jpg"/>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr class="last-tr">
          <td colspan="3">
            <div class="last-item">
              <div class="last-label"><div class="last-text">简介</div></div>
              <div class="last-data">直播优惠大放送，走过路过不要错过，快进来看直播吧</div>
            </div>
          </td>
        </tr>
      </table>
    </el-card>

    <!--直播间数据-->
    <el-card class="card">
      <div class="card-title">直播间数据</div>
      <el-divider></el-divider>
      <table class="card-content">
        <tr class="tr" v-for="(item,index) in studioData">
          <td class="td" v-for="i in item" style="width:33.33%">
            <div class="content-item">
              <div class="item-label"><div class="label-text">{{ i.label }}</div></div>
              <div class="item-data">
                <div v-if="i.type==='string'">{{ i.data }}</div>
                <div v-else-if="i.type==='look'">
                  <div class="click" tabindex="1" @click="viewData">点击查看</div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </el-card>

    <!--商品橱窗-->
    <el-card class="card">
      <div class="card-title">
        <div class="left">商品橱窗</div>
        <div class="right">
          <el-button type="success" @click="isAddGoods = true">添加商品</el-button>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="el-table">
        <el-table
          :data="shopWindowData"
          stripe
          v-loading="shopWindow.loading">
          <el-table-column prop="title" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="picture" label="图片" align="center">
            <template slot-scope="scope">
              <img :src="`https://tencentyun-ms-1312352800.cos.ap-guangzhou.myqcloud.com/${scope.row.thumbnail}`" style="width:50px;height:50px;"/>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格(￥)" align="center"></el-table-column>
          <el-table-column prop="type" label="类型" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type=='link'">外部商品</span>
              <span v-else>SAAS商城商品</span>
            </template>
          </el-table-column>
          <el-table-column prop="link" label="商品外部链接" align="center"></el-table-column>
          <el-table-column prop="salesQuantity" label="当前销量" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type=='link'"></span>
              <span v-else>{{scope.row.salesQuantity}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="累计销售金额(￥)" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type=='link'"></span>
              <span v-else>{{scope.row.amount}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.sellable">已上架</span>
              <span v-else>已下架</span>
            </template>
          </el-table-column>
          <el-table-column prop="operation" label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click.stop="takeDown(scope.row.id)" type="text" v-if="scope.row.sellable">下架</el-button>
              <el-button @click.stop="shelves(scope.row.id)" type="text" v-else>上架</el-button>
              <el-button v-if="scope.row != shopWindowData[shopWindowData.length-1]" @click.stop="down(scope.row.id)" type="text">下移</el-button>
              <el-button v-if="scope.row != shopWindowData[0]" @click.stop="up(scope.row.id)" type="text">上移</el-button>
              <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red;">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pager-group">
          <el-pagination
            @size-change="handleProductSizeChange"
            @current-change="handleProductCurrentChange"
            :current-page="shopWindow.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="shopWindow.pageSize"
            layout="total, sizes, jumper, prev, next"
            :total="shopWindow.total"
          ></el-pagination>
        </div>
      </div>
    </el-card>

    <!--订单销售情况-->
    <el-card class="card">
      <div class="card-title">订单销售情况</div>
      <el-divider></el-divider>
      <div class="el-table">
        <el-table :data="salesData" stripe>
          <el-table-column prop="nickname" label="用户昵称" align="center"></el-table-column>
          <el-table-column prop="orderNumber" label="订单号" align="center"></el-table-column>
          <el-table-column prop="commodityName" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="commodityNumber" label="商品数量" align="center"></el-table-column>
          <el-table-column prop="orderAmount" label="下单金额(￥)" align="center"></el-table-column>
        </el-table>
        <div class="pager-group">
          <el-pagination
            @size-change="handleSalesSizeChange"
            @current-change="handleSalesCurrentChange"
            :current-page="sales.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="sales.pageSize"
            layout="total, sizes, jumper, prev, next"
            :total="sales.total"
          ></el-pagination>
        </div>
      </div>
    </el-card>

    <!--添加商品弹框-->
    <el-dialog title="添加商品" :visible.sync="isAddGoods" width="40%">
      <el-form :model="goodsForm">
        <el-form-item label="商品类型">
          <el-select v-model="goodsForm.region" @change="$forceUpdate();" placeholder="请选择">
            <el-option label="SAAS商城商品" value="saas"></el-option>
            <el-option label="外部商品" value="external"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="saveProduct">确定</el-button>
      </div>
    </el-dialog>

    <!--上架-->
    <shelves @close="closeShelves" :isShelves="isShelves" :product-id="productId"></shelves>
    <!--添加SAAS商城商品-->
    <add-product :isAddProduct="isAddProduct" @close="closeShopWindow" :id="id"></add-product>
    <!--添加外部商品-->
    <edit :isEdit="isExternal" @close="closeEdit" :live-id="id"></edit>
  </div>
</template>

<script>
import PageMixin from '@/framework/mixins/pageMixin'
import LiveStreaming from "@/framework/components/liveStreaming/liveStreaming";
import Shelves from "@/framework/components/dialog/live/list/shelves";
import AddProduct from "@/framework/components/dialog/live/list/addProduct"
import Edit from "@/framework/components/dialog/goods/list/edit"
import {findByLive,up,down,batchReverse,batchDelete} from "@/project/service/product";

export default {
  name: "console",
  mixins: [
    PageMixin,
  ],
  components:{ LiveStreaming,Shelves,AddProduct,Edit },
  data(){
    return{
      id:'',
      //直播回放详情
      details:[
        [
          {label:"直播间ID",data:'653254',type:'string'},
          {label:"直播间标题",data:'国际纺织展览会',type:'string'},
          {label:"封面",data:'',type:'img'}
        ],
        [
          {label:"待开始",data:'带开始',type:'string'},
          {label:"开播时间",data:'2022-01-05 12:00',type:'string'},
          {label:"结束时间",data:'2022-01-05 15:00',type:'string'}
        ],
        [
          {label:"直播屏幕方向",data:'竖屏',type:'string'},
          {label:"直播方式",data:'APP直播',type:'string'},
          {label:"标签",data:'时尚周、T台秀',type:'string'}
        ],
        [
          {label:"直播定位地址",data:'广州市天河区乐天大厦',type:'string'},
          {label:"是否保存录像",data:'是',type:'string'},
          {label:"推流地址",data:'http://www.baidu.com',type:'string'}],
      ],
      //直播回放数据
      studioData:[
        [
          {label:"总访问人次",data:'283',type:'string'},
          {label:"总访问人数",data:'134',type:'string'},
          {label:"观看总人数",data:'234',type:'string'}
        ],
        [
          {label:"点赞数",data:'134',type:'string'},
          {label:"转发数",data:'23',type:'string'},
          {label:"数据统计",data:'点击查看',type:'look'}
        ],
      ],
      //商品橱窗
      shopWindowData:[
        // {name:'纯棉布料',picture:'888',price:'',type:'外部商品',link:'https://www.taobao.com',salesVolume:'',salesTotal:'',state:'已下架'},
        // {name:'衬衫布料',picture:'888',price:'9.9',type:'SAAS商城商品',link:'',salesVolume:'10',salesTotal:'99',state:'已上架'},
        // {name:'帆布布料',picture:'888',price:'19.9',type:'外部商品',link:'https://www.taobao.com',salesVolume:'',salesTotal:'',state:'已下架'},
      ],
      //商品橱窗的分页信息
      shopWindow:{
        page:1,
        pageSize:10,
        total:0,
        loading: true,
      },
      isShelves:false,//商品是否上架
      //订单销售情况
      salesData:[
        {nickname:'张三',orderNumber:'65452452154125324',commodityName:'纺织品',commodityNumber:'10',orderAmount:'653.12'},
        {nickname:'李四',orderNumber:'65452452154125325',commodityName:'纺织布料',commodityNumber:'1',orderAmount:'9554.50'},
        {nickname:'刘备',orderNumber:'65452452154125326',commodityName:'纺织布料',commodityNumber:'2',orderAmount:'65.00'},
        {nickname:'诸葛亮',orderNumber:'65452452154125327',commodityName:'纺织布料',commodityNumber:'5',orderAmount:'68.00'},
        {nickname:'关羽',orderNumber:'65452452154125328',commodityName:'纺织布料',commodityNumber:'1',orderAmount:'963.00'},
      ],
      //订单销售情况的分页信息
      sales:{
        page:1,
        pageSize:0,
        total:0,
      },
      isAddGoods: false,//是否添加商品
      goodsForm:{

      },//添加商品弹框的表单
      isEnd: false,//直播状态是否已结束
      isAddProduct: false,//添加SAAS商城商品
      isExternal: false,//添加外部商品
      productId:'',//商品id
    }
  },
  watch:{

  },
  created() {
    this.id = this.$route.params.id == ':id' ? sessionStorage.getItem('consoleId') : this.$route.params.id
    console.log("控制台ID:"+this.id)
    this.$store.commit('LIVE_ID',this.id)
    this.findProduct(this.id)
  },
  methods:{
    //获取商品橱窗数据
    findProduct(id){
      let param = {
        product:{live:{id}},
        pageable:{page: this.shopWindow.page, size: this.shopWindow.pageSize, sort: 'id', desc: true}
      }
      // console.log(param)
      findByLive(param,data => {
        console.log(data)
        data.forEach(item => {
          item.id = item.id.toString()
        })
        for(let i=0;i<data.length;i++){
          for(let j=i+1;j<data.length;j++){
            if(data[j].position < data[i].position){
              let temp = data[i]
              data[i] = data[j]
              data[j] = temp
            }
          }
        }
        this.shopWindowData = data
        this.shopWindow.loading = false
      })
    },
    //列表更新
    listUpdate(){
      this.findProduct()
      // this.getCount()
    },
    //商品橱窗页码改变
    handleProductCurrentChange(val) {
      this.shopWindow.page = val
      this.listUpdate()
    },
    //商品橱窗每页数据条数改变
    handleProductSizeChange(pageSize) {
      this.shopWindow.pageSize = pageSize
      this.listUpdate()
    },
    //订单页码改变
    handleSalesCurrentChange(val) {
      this.sales.page = val
      this.listUpdate()
    },
    //订单每页数据条数改变
    handleSalesSizeChange(pageSize) {
      this.sales.pageSize = pageSize
      this.listUpdate()
    },
    //添加商品的确认按钮事件
    saveProduct(){
      if(this.goodsForm.region == 'saas'){
        this.isAddProduct = true
      }else if(this.goodsForm.region == 'external'){
        this.isExternal = true
      }
    },
    //取消添加商品
    cancel(){
      this.findProduct(this.id)
      this.goodsForm.region = ''
      this.isAddGoods = false
    },
    //关闭添加SAAS商品弹框
    closeShopWindow(){
      this.isAddProduct = false
    },
    //关闭添加外部商品弹框
    closeEdit(){
      this.isExternal = false
    },
    //点击查看
    viewData(){
      this.$router.push({path:'/live/playback/console/dataStatistics/'+this.id})
    },
    //商品橱窗上架操作
    shelves(id){
      this.isShelves = true
      this.productId = id
    },
    //关闭上架对话框
    closeShelves(isUpdate){
      this.isShelves = false
      if(isUpdate){
        this.findProduct(this.id)
      }
    },
    //下架
    takeDown(id){
      this.$confirm('确定下架选中商品吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }).then(() => {
        let param = {idList:[id], sellable:false}
        batchReverse(param,data => {
          if(data == '204'){
            this.$message({
              type: 'success',
              message: '下架成功'
            });
            this.findProduct(this.id)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //商品橱窗下移
    down(id){
      let param = {id, liveId:this.id}
      down(param,data => {
        if(data == '204'){
          this.findProduct(this.id)
        }
      })
    },
    //商品橱窗上移
    up(id){
      let param = {id, liveId:this.id}
      up(param,data => {
        if(data == '204'){
          this.findProduct(this.id)
        }
      })
    },
    //商品橱窗移除
    remove(id){
      this.$confirm('确定移除选中商品吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }).then(() => {
        batchDelete({idList:[id]},data => {
          if(data == '204'){
            this.$message.success('移除成功')
            this.findProduct(this.id)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
  }
}
</script>

<style lang="less" scoped>
.page{
  width:100%;

  .card{
    margin-bottom: 25px;

    .card-title{
      display: flex;
      width: 100%;
      align-items: center;

      .right{
        flex:1;
        display: flex;
        justify-content: right;
      }
    }

    .video{
      min-height: 500px;
    }
  }

  .card-content{
    width: 100%;
    border:1px solid #ededed;
    border-collapse:collapse;

    .last-item{
      display: flex;
      min-height: 80px;
      width: 100%;

      .last-label{
        width: 120px;
        border-right: 1px solid #ededed;
        background-color: #f2f2f2;
        min-heigth: 80px;
        text-align: center;

        .last-text{
          height:100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .last-data{
        flex:1;
        padding: 10px;
        display: flex;
        align-items: center;
        word-break:break-all;

        .data-text{
          width:100%;
        }
      }
    }

    tr:last-child{
      height:80px;
    }

    .tr{
      height:80px;

      .td{
        border:1px solid #ededed;
        height: 80px;
        overflow: hidden;

        .content-item{
          display: flex;
          min-height: 80px;

          .item-label{
            width: 120px;
            border-right: 1px solid #ededed;
            background-color: #f2f2f2;
            min-heigth: 80px;
            text-align: center;

            .label-text{
              height: 80px;
              display: flex;
              justify-content: center;
              align-items: center;
              padding:8px;
            }
          }

          .item-data{
            padding: 10px;
            min-height:80px;
            display: flex;
            align-items: center;
            flex:1;
            word-break:break-all;

            .click{
              color: rgb(18, 150, 220);
              text-decoration:underline;
              cursor:pointer;
            }

            .click:focus{
              color: rgb(85,26,139);
            }

            img{
              width: 75px;
              height: 75px;
            }
          }
        }
      }
    }
  }

  .cover{
    display: flex;
    align-items: center;
  }

  .pager-group{
    width:100%;
    margin: 20px 0;
  }
}
</style>
